import {Popconfirm, Space, Table, Switch, message, Button} from 'antd'
import React, {useState} from 'react'
import http from '../../../../utils/http'


// table组件
const TableCategory = ({data, openModal, getData}) => {

  const [currentPage, setCurrentPage] = useState(1)

  // 是否启用
  const onChange = (checked, record) => {
    console.log(checked, record)
    if (record.classify === 1) {
      http({
        url: '/huangyi/editState1',
        method: 'post',
        data: {
          id: record.id,
          state: checked ? 1 : 0
        }
      }).then(res => {
        console.log(res)
        getData()
      })
    } else {
      http({
        url: '/huangyi/editState2',
        method: 'post',
        data: {
          id: record.id,
          state: checked ? 1 : 0
        }
      }).then(res => {
        console.log(res)
        getData()
      })
    }
  }

  // 确定删除弹框
  const confirmDel = function(text, record) {
    message.success('商品已删除')
    if (record.classify === 1) {
      http({
        url: '/huangyi/delClassify1',
        method: 'post',
        data: {
          id: record.id,
        }
      }).then(res => {
        console.log(res)
        getData()
      })
    } else {
      http({
        url: '/huangyi/delClassify2',
        method: 'post',
        data: {
          id: record.id,
        }
      }).then(res => {
        console.log(res)
        getData()
      })
    }

  }

  // 取消删除弹框
  const cancelDel = function(e) {
    console.log(e)
    message.error('取消此商品删除')
  }

  // 表头
  const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分类图片',
      dataIndex: 'image_url',
      key: 'image_url',
      render: (text, record) => (
        <img className='goodsImg' src={text} alt='商品图' />

      ),
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: '商品数',
      dataIndex: 'goods_num',
      key: 'goods_num',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      render: (text, record) => (
        <Switch defaultChecked={text ? true : false} onChange={(checked) => onChange(checked, record)} />
      ),
    },
    {
      title: '操作',
      dataIndex: 'shelf',
      key: 'shelf',
      render: (text, record) => (
        <Space size="middle">
          <Button type="link" onClick={() => openModal(true, 0, '添加二级分类', record)} style={{display: record.add ? '' : 'none'}} >添加</Button>
          <Button type="link" onClick={() => openModal(true, 1, '编辑二级分类', record)}>编辑</Button>
          <Popconfirm
            title="确定删除此商品吗?"
            onConfirm={() => confirmDel(text, record)}
            onCancel={() => cancelDel(record)}
            okText="Yes"
            cancelText="No"
          >
            <span style={{color: '#1890ff', cursor: 'pointer'}}>删除</span>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  // 当页码改变的时候
  const onChangePage = (page, pageSize) => {
    // console.log(page)
    setCurrentPage(page)
  }

  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        rowKey='id'
        pagination={{
          current: currentPage,
          defaultPageSize: 5,
          total: data.length,
          onChange: onChangePage
        }}
      />
    </>
  )

}
export default TableCategory